<template>
	<!-- 搜索框 -->
	<view class="search-bar-layout" :style="{backgroundColor:props.bgColor}">
		<view class="search-bar-box">
			<xh-input :placeholder="placeholder" bgColor="transparent" height="72rpx" :isLine="false" v-model="searchText">
				<template #left>
					<image class="search-icon" src="/static/my/search_icon.png" mode="aspectFit"></image>
				</template>
			</xh-input>
		</view>
		<view class="search-bar-btn" @tap="searchAction">搜索</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	const searchText = defineModel()
	const props = defineProps({
		// 背景色
		bgColor:{
			type:String,
			default:'#f7f7f7'
		},
		placeholder:{
			type:String,
			default:'输入机具编号'
		}
	})
	const emits = defineEmits(['searchResult'])
	const searchAction = ()=>{
		emits('searchResult',searchText.value)
	}
</script>

<style lang="scss" scoped>
	.search-bar-layout{
		display: flex;
		align-items: center;
		width: 100%;
		.search-bar-box{
			background-color: #fff;
			border-radius: 36rpx;
			border: 1px solid #eee;
			flex: 1;
			.search-icon{
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}
		}
		.search-bar-btn {
			height: 72rpx;
			line-height: 72rpx;
			font-size: 28rpx;
			color: white;
			background-color: $xh-theme-color;
			padding: 0 50rpx;
			border-radius: 36rpx;
			margin-left: 20rpx;
		}
	}
</style>